<template>
    <div class="login">
        <div class="login-box">
            <div class="login-left">
                <div class="login-top">
                    <img :src="logoImg" alt="">
                    <p>ADSCM浆站管理系统</p>
                </div>
                <img :src="logoBg" class="logoBg">
                <div class="login-bottom">成都佳颖医用制品有限公司</div>
            </div>
            <div class="login-right">
                <el-form ref="account" :model="account" :rules="rules" size="medium">
                    <h3 class="title">欢迎回来</h3>
                    <div class="formBody">
                        <el-form-item prop="username" class="reset-form-item">
                            <el-input type="text" v-model="account.username" placeholder="账号" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" class="reset-form-item">
                            <el-input v-model="account.password" type="password" placeholder="请输入登录密码"
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item class="loginBtn">
                            <el-button  type="primary" @click="submit('account')" :disabled="allowLogin" :loading="loading">登录
                            </el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from '@/axios/api.js';
import logoImg from 'static/img/logo_white.png';
import logoBg from 'static/img/logo_bg.png';
    export default {
        data() {
            let date = new Date();
            let validateAccount = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    this.validateCorrect();
                    callback();
                }
            };
            let validatePwd = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    this.validateCorrect();
                    callback();
                }
            };
            return {
                loading: false,
                allowLogin: true,
                logoBg,
                logoImg,
                account: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [{required: true, validator: validateAccount, trigger: 'change'}],
                    password: [{required: true, validator: validatePwd, trigger: 'change'}]
                },
                fullscreenLoading: false,
               };
        },
        create() {
            let reg_user = sessionStorage.getItem('username');
            if (reg_user) {
                this.account.username = reg_user.username;
            }
        },
        methods: {
            submit(formName) {
                let _this = this;

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        api.login(this.account).then(res=>{
                            localStorage.removeItem('menus');
                            sessionStorage.setItem('roles', JSON.stringify(res.content.user.roles));
                            sessionStorage.setItem('unitId', res.content.user.unitId);
                            sessionStorage.setItem('tokenId', res.content.tokenId);
                            sessionStorage.setItem('username', _this.account.username);
                            localStorage.setItem('ms_username', _this.account.username);
                            localStorage.setItem('menus', JSON.stringify(res.content.user.allMenus));
                            _this.$router.push({path: '/dashboard'});
                        },error=>{
                            _this.loading = false;
                        })
                    }
                });
            },
            validateCorrect() {
                if (this.account.password.trim().length > 0 && this.account.username.trim().length > 0) {
                    this.allowLogin = false;
                } else {
                    this.allowLogin = true;
                }
            }
        }
    }
</script>
<style scoped>
.login{
    background: #f1f1f1;
    height:100%;
    width:100%;
    position: relative;
    overflow: auto;
}
.login-box{
    height:488px;
    width:840px;
    background: #fff;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-420px;
    margin-top:-244px;
    box-shadow:2px 2px 10px #999;
}
.login-box .login-left,.login-box .login-right{
    width:50%;
    height: 100%;
    box-sizing: border-box;
    padding-top:60px;
    float: left;
}
.login-box .login-left{
    position: relative;
    background-color:#3bc1c4;
    background: linear-gradient(left,#73d6d8, #3bc1c4);
    color:#fff;
    text-align: center;
}
.login-box .login-left .login-top{
    font-size: 24px;
}
.login-box .login-left  .login-bottom{
    width: 100%;
    position: absolute;
    bottom: 24px;
}
.login-box .login-left .login-top>img{
    margin-bottom: 16px;
}
.login-box .login-left .logoBg{
    position: absolute;
    right: 8px;
    bottom: 8px;
    opacity: .3;
}
.login-box .login-right{
    text-align: center;
}
.login-box .login-right .title{
    color:#3bc1c4;
    margin-bottom:80px;
    font-size: 24px;
    font-weight: normal;
}
.login-box .login-right .formBody{
    width: 268px;
    margin:auto;
}
.login-box .login-right .reset-form-item{
    margin-bottom: 30px;
}
.login-box .login-right .loginBtn{
    text-align: right;
}
</style>


